import ButtonPer from '@/components/ButtonPer';
import { Button } from 'antd';
import { Modal } from 'antd';
import { formConfig } from './config';
import FormGenerator from '@/components/formGenerator';
import { useRef, useState } from 'react';

const User = () => {
  const handleFinish = (values: any) => {
    console.log(values);
  };
  const handleRest = () => {
    console.log('reset');
  };
  // 弹窗
  const [visible, setVisible] = useState(false);
  const form = useRef<any>(null);
  const handleOK = () => {
    setVisible(false);
    const formValues = form.current?.getFieldsValue();
    console.log(formValues);
  };
  const handleCancel = () => {
    setVisible(false);
  };

  return (
    <div>
      {/* 按钮权限 */}
      <ButtonPer
        btn={'add'}
        Comp={
          <Button type='primary' onClick={() => setVisible(true)}>
            添加
          </Button>
        }
      ></ButtonPer>
      <FormGenerator
        config={formConfig}
        onFinish={handleFinish}
        onReset={handleRest}
      />
      <Modal
        title='表单'
        open={visible}
        onOk={handleOK}
        onCancel={handleCancel}
      >
        <FormGenerator
          ref={form}
          config={formConfig}
          isDialog={false}
          onFinish={handleFinish}
          onReset={handleRest}
        />
      </Modal>
    </div>
  );
};

export default User;
